$(function() {
	/* 1. 分类列表分页展示 */
	var currentPage = 1
	var render = function () {
		// 1.1 初始化页面
		getCategorySecondData({
			page: currentPage,
			pageSize: 2
		}, function(res) {
			// console.log(res)
			// 1.2 模板渲染
			$('.table tbody').html(template('secondCategoryTpl', res))
			
			// 2.0 分页展示渲染
			setPaginator(res.page, Math.ceil(res.total / res.size), render)
		})
	}
	render()
	
	/* 2. 分页展示 */
	var setPaginator = function (cp, pages, callback) {
		// 2.1 初始化配置 
        var options = {
        	bootstrapMajorVersion: 3,  // 版本信息
        	size: 'small',             // 字体为小号
        	currentPage: cp,           // 当前页面  
        	totalPages: pages,         // 总页数 
        	onPageClicked: function (event, originalEvent, typePage, curPage) { // 点击页面事件
            	// 事件：typePage是被点击的页码
            	// 2.2 获取当前点击的页数
            	// console.log(curPage)
            	// 2.3 重新请求渲染
            	currentPage = curPage
            	callback && callback()
           	}
        }
		$('.pagination').bootstrapPaginator(options)
	}

	/* 3. 添加二级分类 */
	$('#addBtn').on('click', function() {
		// 3.1 显示模态框
		$('#addModal').modal('show')
	})
	
	/* 4. 初始化下拉框功能 */
	initSelectData(function(res) {
		// console.log(res)
		// 4.1 将后台获取的一级分类数据绑定到下拉框中
		var lis = []
		$.each(res.rows, function(index, item) {
			lis.push('<li><a data-id="'+ item.id +'" href="javascript:;">' + item.categoryName +'</a></li>')
		})
		$('.dropdown-menu').html(lis.join(''))
		// 4.2 给li中的a注册点击事件实现模拟下拉框功能
		$('.dropdown-menu').on('click', 'a', function() {
			// 4.2.1 获取点击的元素中的值
			var currVal = $(this).html()
			// 4.2.2 将值设置到下拉框中
			$('.dropdown-text').html(currVal)
			
			// 5.2.2 绑定 一级分类列表id 到表单中
			$('[name="categoryId"]').val($(this).data('id'))
			
			// 6.3.1  更新表单验证状态--》更新下拉框状态为合法
			 $('#form').data('bootstrapValidator').updateStatus('categoryId','VALID')
		})
	})
	
	/* 5. 图片上传功能 */
	initUpload()
	
	/* 6. 表单验证 功能 */
    $('#form').bootstrapValidator({
        excluded:[], // 6.1 不忽略任何情况的表单元素   --- 默认 [':disabled', ':hidden', ':not(:visible)'] 校验插件默认会忽略  隐藏的表单元素
        feedbackIcons: {/*input状态样式图片*/
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
        fields: {// 验证：规则   6.2 配置验证 categoryId brandName brandLogo规则
            categoryId: {//验证input项：验证规则
                message: '添加的一级分类不能为空',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '添加的一级分类不能为空'
                    }
                }
            },
            brandName: {//验证input项：验证规则
                message: '添加的二级分类不能为空',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '添加的二级分类不能为空'
                    }
                }
            },
            brandLogo: {//验证input项：验证规则
                message: '请上传图片',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '请上传图片'
                    }
                }
            }
        }
    }) // 6.3 更新表单验证状态  更新下拉框和图片上传验证状态
    .on('success.form.bv', function(e) {
    	// 6.4  验证通过发请求
        // 6.4 1 禁用默认提交的事件 因为要使用ajax提交而不是默认的提交方式
        e.preventDefault()
        // 6.4.2 获取当前的表单  serialize() 方法通过序列化表单值 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
        var $form = $(e.target)
        // console.log($form.serialize()) //  username=itcast&password=111111
        // 6.4.3 发送登录请求
        $.ajax({
            type:'post',
            url:'/category/addSecondCategory',
            data:$form.serialize(),
            dataType:'json',
            success:function (res) {
            	// 6.5 成功请求
                if(res.success){
                    // 6.5.1 关闭模态框
                    $('#addModal').modal('hide')
                    // 6.5.2 重新渲染第一页
                    currentPage = 1
                    render()
                    // 6.5.3 重置表单和验证状态
                    $form[0].reset()
                    $form.data('bootstrapValidator').resetForm()
                    $('.dropdown-text').html('请选择');
                    $form.find('img').attr('src','images/none.png')
                }
            }
        })
    })
	
})
// 获取二级分类数据
var getCategorySecondData = function (params, callback) {
	$.ajax({
		type:"get",
		url:"/category/querySecondCategoryPaging",
		async:true,
		data: params,
		success: function(res) {
			callback && callback(res)
		}
	})
}

// 初始化下拉框获取数据
var initSelectData = function(callback) {
	$.ajax({
		type:"get",
		url:"/category/queryTopCategoryPaging",
		async:true,
		data: {
			page: 1,
			pageSize: 10
		},
		success: function(res) {
			callback && callback(res)
		}
	})
}
// 初始化文件上传
var initUpload = function () {
    $('.fileupload input[type="file"]').fileupload({
        dataType:'json',
        done:function (e, data) {
            // 5.1 预览
            $('.form-group img').attr('src',data.result.picAddr)
            // 5.2 表单匹配后台参数  --》 创建input type="hidden" 绑定值 给name属性便于表单验证
            // 5.2.1 匹配图片参数
            $('[name="brandLogo"]').val(data.result.picAddr)
            
            // 6.3.2  更新表单验证状态--》更新图片上传表单验证状态为合法
            $('#form').data('bootstrapValidator').updateStatus('brandLogo','VALID')
        }
    })
}